<template>
<div class="info-record">
  <!-- 动态信息 -->
  <base-timeline
    :data="recordPage.list"
    :record-render="renderRecord"
    :loading="recordLoading"
    :loadmore="recordPage.hasNextPage"
    @load="loadmore"
  />
</div>
</template>
<script>
import Page from '@model/Page';
import { isOpenData } from '@src/util/platform';
// api
import { getRecord } from '@src/api/ContractApi';
import { t } from '@src/locales'

export default {
  name: 'info-record',
  props: {
    contractId: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      recordLoading: false,
      recordPage: new Page(), // 页面数据
      params: {
        contractId: this.contractId,
        pageNum: 1,
        pageSize: 15,
      },
    };
  },
  mounted() {
    this.searchRecord();
  },
  methods: {
    // 获取动态信息
    getRecordList(params) {
      return getRecord(params);
    },

    // 查询信息动态
    async searchRecord() {
      try {
        this.recordLoading = true;
        let res = await this.getRecordList(this.params);
        let result = res.result || {};
        this.recordLoading = false;
        this.recordPage.list = [];
        this.recordPage.merge(result);
        this.$emit('getRecordCount', result.total);
      } catch (error) {
        console.error(`searchRecord ${error}`);
      }
    },

    // 加载更多
    async loadmore() {
      try {
        this.params.pageNum++;
        this.recordLoading = true;

        let res = await this.getRecordList(this.params);
        let result = res.result || {};
        this.recordLoading = false;
        this.recordPage.merge(result);
      } catch (error) {
        console.error(`product template record loadmore err ${error}`);
      }
    },

    /** 渲染用户 */
    renderUserName(userName, staffId) {
      if (isOpenData && staffId)
        return (
          <strong>
            {<open-data type="userName" openid={staffId}></open-data>}
          </strong>
        );
      return <strong>{userName}</strong>;
    },

    /** 根据记录的action渲染对应的内容，支持jsx和render函数 */
    renderRecord(h, record) {
      let { recordAction, createUser, recordObject } = record || {};
      let { displayName, staffId } = createUser || {};
      if (recordAction === 'UPDATE') {
        return [
          <i18n path="common.record.contract.action.EDIT" tag="h5">
            <span place="operator">{this.renderUserName(displayName, staffId)}</span>
          </i18n>,
          recordObject?.updateFields ? <p>{t('common.base.modifyField')}{recordObject?.updateFields || ''}</p> : ''
        ];
      }
      
      if (recordAction === 'UPDATE_PRODUCT') {
        return [
          <i18n path="common.record.contract.timeIsEdit" tag="h5">
            <strong place="name">{recordObject?.productName || ''}</strong>
            <span place="value1">{recordObject?.qualityEndTime || ''}</span>
            <span place="value2">{recordObject?.qualityStartTime || ''}</span>
          </i18n>
        ];
      }
      return [
        <i18n path={`common.record.contract.action.${recordAction}`} tag="h5">
          <span place="operator">{this.renderUserName(displayName, staffId)}</span>
        </i18n>
      ];
    },
  },
};
</script>
<style lang="scss" scoped>
.info-record {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
  ::v-deep .base-timeline {
    padding: 0 !important;
  }
}
</style>